<template>
    <el-container id="container">
        <el-header height="70px">菜单管理系统</el-header>
        <el-container>
            <el-aside width="200px">
                <Sidebar></Sidebar>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import Sidebar from './Sidebar.vue'
export default {
    components: {
        Sidebar
    }
};
</script>
    
<style>
#container {
    height: 100vh;
}
.el-header {
    background-image: linear-gradient(90deg, rgb(207, 226, 252), rgb(234, 251, 208));
    color: #333;
    text-align: left;
    line-height: 70px;
    font-size: 23px;
    font-weight: bold;
    margin-bottom: 15px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 0 10px gray;
}

.el-aside {
    background-color: #ffdee9;
    background-image: linear-gradient(125deg, #ffdee9 0%, #b5fffc 100%);

    color: #333;
    text-align: center;
    margin-right: 15px;
    border-radius: 0 10px 0 0;
    box-shadow: 0 0 8px gray;
}

.el-main {
    background-image: linear-gradient(
        135deg,
        rgb(207, 224, 252),
        rgb(248, 252, 207)
    );
    color: #333;
    border-radius: 10px 0 0 0;
    box-shadow: 0 0 8px gray;
}
</style>